<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">远程开门</view>
		</cu-custom>
		<view :class="['cu-list menu-avatar FirstList margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]">
			<block v-for="(item,index) in deliverplan" :key="index">
				<view class="cu-item">
					<view class="cu-avatar radius lg" style="background-color:#fff">
						<image src="/static/images/Accesscontrol.png" mode="aspectFit"></image>
					</view>
					<view class="content">
						<view class="text-pink">
							<view class="text-cut">{{item.LMACHINENO}}</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">{{item.LREMARK}}</view>
						</view>
					</view>
					<view>
						<button class='cu-btn bg-green shadow' @click="postfile(item,index)" :disabled="index == flag ? true:false">开门</button>
					</view>
				</view>
			</block>
		</view>
		<view class="cu-load load-modal" v-if="loadModal">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/images/uniapplogo.png" mode="aspectFit"></image>
			<view class="gray-text">开门中...</view>
		</view>
	</view>
</template>

<script>
	import {
		getselectReferList
	} from "@/service/selectList.js"
	import {
		option
	} from "@/service/updateList.js"
	import {
		mapGetters,
	} from "vuex";
	export default {
		data() {
			return {
				deliverplan: [],
				height: this.screenHeight,
				placeholder: '姓名',
				flag: -1,
				loadModal: false,
			}
		},
		components: {

		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox'])
		},
		beforeDestroy() {
			this.closeSocket();
		},
		onLoad() {
			getselectReferList(1503, '表头', 'LMACHINENO', {}).then(res => {
				if (res.code != 0) {
					this.deliverplan = res.data
				}
			})
			this.socketTask = uni.connectSocket({
				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
				// url: "ws://192.168.31.29:8888/websocket/socketServer.do",
				url: "ws://" + uni.getStorageSync('IP').split("//")[1] + ':8888/' +
					"websocket/socketServer.do",
				success(data) {
					console.log("websocket连接成功");
				},
			});
			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
			// console.log( this.deliverplan[i].LMACHINENO);
			// let data = {
			// 	"from": "ahlinghui",
			// 	"to": 'V1',
			// 	"data": 'AB'
			// }
			this.socketTask.onOpen((res) => {
				console.log("WebSocket连接正常打开中...！");
				// this.is_open_socket = true;
				// 注：只有连接正常打开中 ，才能正常成功发送消息
				// setInterval(()=> {
				// this.socketTask.send({
				// 	data: JSON.stringify(data),
				// 	async success() {
				// 		console.log("消息发送成功");
				// 	},
				// });
				// },1000)
				// 注：只有连接正常打开中 ，才能正常收到消息
				this.socketTask.onMessage((res) => {
					// let mydata = JSON.parse(res.data)
					console.log(res);
				});
			})
			// 这里仅是事件监听【如果socket关闭了会执行】
			this.socketTask.onClose(() => {
				console.log("已经被关闭了")
			});
			// }
		},
		methods: {
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						// this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			postfile(item, index) {
				this.flag = index
				console.log(item);
				let data = {
					"from": "1",
					"to": item.LMACHINENO,
					"data": 'AB'
				}
				console.log(data);
				let that = this
				that.loadModal = true
				this.socketTask.send({
					data: JSON.stringify(data),
					async success() {
						console.log("消息发送成功");
						setTimeout(() => {
							that.loadModal = false
							uni.showToast({
								title: '开门成功',
								icon: 'none'
							})
							that.flag = -1
						}, 2000)
					},
				});
				// option(item.LMACHINENO, 'AB').then(res => {
				// 	uni.hideLoading()
				// 	if (res.code == 1) {
				// 		this.loadModal = true;
				// 		setTimeout(() => {
				// 			uni.hideLoading();
				// 			this.loadModal = false;
				// 			uni.showToast({
				// 				title: '开门成功',
				// 				icon: 'none'
				// 			})
				// 			this.flag = -1
				// 		}, 2000)
				// 	} else {
				// 		uni.showLoading({
				// 			title: '开门失败',
				// 		});
				// 		this.flag = -1
				// 	}
				// })
				// console.log(item);
			}
		}
	}
</script>

<style>
	page {
		background-color: whitesmoke;
	}
</style>
